<template>
	<view class="device-detail-policy-info">
		<view class="device-detail-policy-info-item">
			<text>政策编号</text>
			<text>{{dataInfo.policyId}}</text>
		</view>
		<view class="device-detail-policy-info-item">
			<text>政策名称</text>
			<text>{{dataInfo.policyName}}</text>
		</view>
		<!-- 活动政策 -->
		<view class="device-detail-policy-info-title">
			<text>活动政策</text>
		</view>
		<view class="table">
			<view class="table-row">
				<text class="table-cell">活动名称</text>
				<text class="table-cell">状态</text>
				<text class="table-cell">到期时间</text>
			</view>
			<view class="table-row" v-for="(item,index) in dataInfo.activityInfoVos
" :key="index">
				<text class="table-cell">{{item.activityName}}</text>
				<text class="table-cell">{{item.status == '1' ? '已完成' : '未完成'}}</text>
				<text class="table-cell">{{item.endDateTime}}</text>
			</view>
		</view>
		<!-- 考核政策 -->
		<view class="device-detail-policy-info-title">
			<text>考核政策</text>
		</view>
		<view class="table">
			<view class="table-row">
				<text class="table-cell">考核名称</text>
				<text class="table-cell">触发状态</text>
				<text class="table-cell">触发时间</text>
			</view>
			<view class="table-row" v-for="(item,index) in dataInfo.assessmentInfoVos" :key="index">
				<text class="table-cell">{{item.assessmentName}}</text>
				<text class="table-cell">{{item.status == '1' ? '已触发' : '未触发'}}</text>
				<text class="table-cell"></text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue'
	import { getDeviceDetailByPolicy } from '@/common/api/api.js'
	
	const props = defineProps(['model'])
	const dataInfo = ref({})
	const loadData = async ()=>{
		let params = {}
		if(props.model.id){
			params.id = props.model.id
		}
		else{
			params.id = props.model.deviceId
		}
		const res = await getDeviceDetailByPolicy(params)
		dataInfo.value = res.result
	}
	// 组件挂载
	onMounted(()=>{
		loadData()
	})
</script>

<style lang="scss" scoped>
	.device-detail-policy-info {
		background-color: #fff;
		border: 1px solid #eee;
		border-radius: 16rpx;
		padding: 30rpx;
		.device-detail-policy-info-item {
			display: flex;
			align-items: center;

			text:nth-child(2) {
				margin-left: 20rpx;
				color: $xh-color-9;
			}

			&:nth-child(2) {
				margin-top: 30rpx;
			}
		}

		.device-detail-policy-info-title {
			margin: 30rpx 0 20rpx 0;
		}

		.table {
			display: table;
			width: 100%;
			/* 单元格边框合并 */
			border-collapse: collapse;

			.table-row {
				display: table-row;

				.table-cell {
					display: table-cell;
					border: 1px solid #eee;
					/* 单元格边框 */
					padding: 20rpx 10rpx;
					/* 单元格内边距 */
					text-align: center;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}
</style>